<template>
    <el-form-item label="数据源" prop="readerDatasourceId">
        <el-select v-model="form.readerDatasourceId" filterable >
            <el-option
                v-for="item in  sourceList.filter(e=>e.datasourceType.indexOf('ftp')!=-1)" :key="item.datasourceId"
                :label="item.datasourceName + '_' + item.datasourceType"
                :value="item.datasourceId"/>
        </el-select>
    </el-form-item>
    <el-form-item label="文件编码" prop="readerFileEncoding">

        <el-select v-model="form.readerFileEncoding" placeholder="请选择文件编码" default-first-option filterable>
            <el-option v-for="item in readerFileEncodingList" :key="item" :label="item" :value="item"/>
        </el-select>

    </el-form-item>
    <el-form-item label="文件路径"  prop="readerFilePath">
        <el-input type="textarea" v-model="form.readerFilePath" placeholder="请输入文件路径（如需根据文件名过滤：/path/*${filename}*）" clearable/>
    </el-form-item>
    <el-form-item label="文件分隔符" prop="readerFileDelimiter">
        <el-input v-model="form.readerFileDelimiter" placeholder="请输入文件分隔符" clearable/>
    </el-form-item>
  <el-form-item label="文件类型" prop="readerFileType">
    <el-select v-model="form.readerFileType" placeholder="请输入文件类型" default-first-option filterable>
      <el-option v-for="item in readerFileTypeList" :key="item" :label="item" :value="item"/>
    </el-select>
  </el-form-item>
  <el-form-item label="压缩模式" prop="readerZipType">
    <el-select v-model="form.readerZipType" placeholder="请输入压缩模式" default-first-option filterable>
      <el-option v-for="item in readerZipTypeList" :key="item" :label="item" :value="item"/>
    </el-select>
  </el-form-item>
    <el-form-item label="同步方式" prop="syncMode">
        <el-select v-model="form.syncMode" default-first-option filterable placeholder="请选择同步方式">
            <el-option v-for="item in dayWayList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"/>
        </el-select>
    </el-form-item>
  <el-form-item v-if="form.syncMode === '8'" label="同步时间" prop="specifyTime">
    <el-date-picker v-model="form.specifyTime"
                    placeholder="请输入同步时间"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="specifyTimeChange"
                    style="width: 100%"/>
  </el-form-item>
  <el-form-item v-show="form.syncMode !== '6'" label="字段变量" prop="syncField">
    <el-input v-model="form.syncField" placeholder="请输入文件名变量，配合文件路径的匹配表达式，如：filename" clearable/>
  </el-form-item>
    <el-form-item v-show="form.syncMode !== '6'" label="字段类型" prop="syncFieldType">
        <el-select v-model="form.syncFieldType" placeholder="请选择字段类型" default-first-option filterable>
            <el-option v-for="item in syncFieldTypeList" :key="item" :label="item" :value="item"/>
        </el-select>
    </el-form-item>
    <el-form-item v-show="form.syncMode !== '6'" label="字段格式" prop="syncFieldDateformat">
        <el-select v-model="form.syncFieldDateformat" placeholder="请选择字段类型" default-first-option filterable>
            <el-option v-for="item in syncFieldDateformatList" :key="item" :label="item" :value="item"/>
        </el-select>
    </el-form-item>
    <el-form-item v-show="form.syncMode === '7'" label="最新同步记录值" prop="lastSuccValue">
      <el-input v-model="form.lastSuccValue" placeholder="请输入最新的同步记录值" clearable/>
    </el-form-item>
    <el-form-item label="文件后缀名" prop="fileSuffix">
      <el-input v-model="form.fileSuffix" placeholder="请输入文件后缀名"/>
    </el-form-item>
    <el-form-item label="跳过首行" prop="skipHeader">
      <el-radio-group v-model="form.skipHeaderBool">
        <el-radio :label="true">是</el-radio>
        <el-radio :label="false">否</el-radio>
      </el-radio-group>
    </el-form-item>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import dayjs from 'dayjs';

const props = defineProps({
    form: {
        type: Object,
        default: () => {
        }
    },
    sourceList: {
        type: Array,
        default: () => []
    },
    dayWayList: {
        type: Array,
        default: () => []
    },
});
const form = reactive(props.form);
const readerFileEncodingList = ref(['UTF-8','GBK']);
const syncFieldTypeList = ref(['Date','TimeStamp','String'])
const syncFieldDateformatList = ref(['yyyy-MM-dd','yyyyMMdd','yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm'])
const readerFileTypeList = ref(['binary','txt']);
const readerZipTypeList = ref(['gzip','zip']);
onMounted(() => {
  if (form.specifyTimeStart && form.specifyTimeEnd) {
    form.specifyTime = [
      dayjs(form.specifyTimeStart).toDate(),
      dayjs(form.specifyTimeEnd).toDate()
    ];
  }
  if(form.skipHeader != null) {
    console.log("=== true",form.skipHeader);
    form.skipHeaderBool = form.skipHeader === "true";
  }
  console.log("bool",form.skipHeaderBool);
});
const specifyTimeChange = (val) => {
  if(val && val.length >= 2){
    form.specifyTimeStart = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss').toString();
    form.specifyTimeEnd = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss').toString();
  }
}
watch(() => form.fileSuffix, (newVal) => {
  if (newVal && !newVal.startsWith('.')) {
    form.fileSuffix = '.' + newVal;
    console.log(form.fileSuffix);
  }
});

</script>

<style scoped>

</style>